<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import api from '@/api'

const switchValue = ref('')
const $route = useRoute()
const $router = useRouter()

const keyword = ref('')
const listData = ref([])
const getListData = async () => {
  try {
    const res = await api.get('/group', {
      params: {
        keyword: keyword.value,
        page: 1,
        pageSize: 10,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    // listTotal.value = res.total
  } catch (error) {
    console.error(error)
  }
}
getListData()

const formVisible = ref(false)
const formVisible2 = ref(false)
const formLoading = ref(false)
const formItem = ref(null)
const formItem2 = ref(null)
const formData = ref({
  name: '',
})
const formData2 = ref({
  teacher_id: '',
  id: '',
})
const formRules = {
  name: [
    {
      required: true,
      message: '请填写群组名称',
    },
  ],
}
const formRef = ref()
const formRef2 = ref()

const create = () => {
  formRef.value?.resetFields()
  formItem.value = null
  formVisible.value = true
}

const update = (item) => {
  formRef.value?.resetFields()
  formItem.value = item
  formData.value.name = item.name
  formVisible.value = true
}

const setTeacher = (item) => {
  formRef2.value?.resetFields()
  formItem2.value = item
  formData2.value.id = item.id
  formData2.value.teacher_id =  ''
  formVisible2.value = true
}

const formSubmit = async () => {
  if (await formRef.value.validate()) {
    return false
  }

  formLoading.value = true

  try {
    if (formItem.value) {
      await api.put('group/' + formItem.value.id, formData.value)
    } else {
      await api.post('group', formData.value)
    }
    formRef.value?.resetFields()
    formVisible.value = false
    getListData()
  } catch (error) {
    console.error(error)
  }

  formLoading.value = false

  return false
}

const del = (record) => {
  // Message.error({
  //   content: record.id,
  // })
  api
    .delete(`/group/${record.id}`)
    .then((res) => {
      if (res.code == 200) {
        Message.success({
          content: '删除成功',
        })
        getListData()
      } else {
        Message.error({
          content: res.message,
        })
      }
    })
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const teacher_list = ref([])
let tl=[...new Set(teacher_list.value)];
const teacherLoading = ref(false)

const getTeacherList = async () => {
  teacherLoading.value = true
  try {
    let res=await api.get('group/teacherlist')
    teacher_list.value = res.data.items
  } catch (error) {
    console.error(error)
  }
  tl=[...new Set(teacher_list.value)];
  console.log(tl);
  teacherLoading.value = false
}

getTeacherList()

const formSubmit2 = async () => {
  if (await formRef2.value.validate()) {
    return false
  }

  formLoading.value = true

  try {
    await api.post('group/setteacher', formData2.value)
    formRef2.value?.resetFields()
    formVisible2.value = false
    getListData()
  } catch (error) {
    console.error(error)
  }

  formLoading.value = false

  return false
}

</script>

<template>
  <div class="page">
    <div class="header">
      <div>
        <a-input-search
          :style="{ width: '320px' }"
          v-model="keyword"
          placeholder="群组名称模糊查询"
          button-text="查询"
          @search="getListData"
          search-button
        />
      </div>
      <a-button @click="create" type="primary"
        >新建群组</a-button
      >
    </div>

    <a-table :data="listData">
      <template #columns>
        <a-table-column title="序号" :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column
          title="群组名称"
          data-index="name"
        ></a-table-column>
        <a-table-column
          title="班主任"
        >
          <template #cell="{ record }">
            <template v-if="record.teacher_id>0">
              {{record.teachers.name}}
            </template>
            <template v-else>
              -未设置-
            </template>
          </template>
        </a-table-column>
        <a-table-column
          title="人数"
          data-index="users_count"
        ></a-table-column>
        <a-table-column
          title="任务数"
          data-index="tasks_count"
        ></a-table-column>

        <a-table-column title="操作" align="center" :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button
                type="primary"
                size="mini"
                @click="setTeacher(record)"
                >配置班主任</a-button
              >
              <a-button
                type="primary"
                size="mini"
                @click="update(record)"
                >编辑</a-button
              >

              <a-popconfirm
                @ok="del(record)"
                content="确认删除该数据吗?"
                type="warning"
              >
                <a-button type="primary" status="danger" size="mini"
                  >删除</a-button
                >
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal
      v-model:visible="formVisible"
      :title="(formItem ? '编辑' : '添加') + '群组'"
      :ok-loading="formLoading"
      :on-before-ok="formSubmit"
    >
      <a-form ref="formRef" :model="formData" :rules="formRules">
        <a-form-item field="name" label="群组名称">
          <a-input v-model="formData.name" allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="formVisible2"
      title="设置班主任"
      :on-before-ok="formSubmit2"
    >
      <a-form ref="formRef2" :model="formData2">
        <a-form-item field="name" label="班主任">
          <a-select v-model="formData2.teacher_id" :style="{width:'320px'}" placeholder="请选择班主任" allow-search>
            <a-option
              v-for="item in tl"
              :value="item.id"
            >
            {{item.username}}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  justify-content: space-between;
}
</style>
